import { Directive, HostListener, ElementRef, Renderer2, Input, Output, EventEmitter } from '@angular/core';
import { DragDrapService, DragData } from '../drag-drap.service';
import { Observable } from 'rxjs';
import { take } from 'rxjs/operators';

// 放
//[draggedCalss]  指令的输入型参数
@Directive({
  selector: '[app-droppable][dropTags][dragEnterCalss]'
})
export class DropDirective {
  @Output() dropped: EventEmitter<DragData> = new EventEmitter();
  @Input() dropTags: string[] = [];
  @Input() dragEnterCalss: string = '';
  private drag$: Observable<DragData | null>;
  //ElementRef 指向DOM 元素的引用
  //Renderer2 操作 DOM 的类
  constructor(private el: ElementRef, private rd: Renderer2,private dragServes:DragDrapService) { 
    this.drag$ = this.dragServes.getDragData().pipe(take(1));
  }

  // 拖拽 进入我的领域
  @HostListener('dragenter', ['$event'])
  onDragEnter(ev: Event) {
    ev.preventDefault();
    ev.stopPropagation();
    // 判断拖拽 是否是 当前应用的元素 发起的
    if (this.el.nativeElement === ev.target) {
      this.drag$.subscribe(dragData => {
        if (dragData && this.dropTags.indexOf(dragData.tag) > -1) {
          this.rd.addClass(this.el.nativeElement, this.dragEnterCalss);
          // this.rd.setProperty(this.el.nativeElement, 'dataTransfer.effectAllowed', 'all');
          // this.rd.setProperty(this.el.nativeElement, 'dataTransfer.dropEffect', 'move');
        }
      });
      
    }
  }

  // 在元素正在拖动到放置目标时触发： 在我上面
  @HostListener('dragover', ['$event'])
  onDragOver(ev: Event) {
    ev.preventDefault();
    ev.stopPropagation();
    // 判断拖拽 是否是 当前应用的元素 发起的
    if (this.el.nativeElement === ev.target) {
      this.drag$.subscribe(dragData => {
        if (dragData && this.dropTags.indexOf(dragData.tag) > -1) {
          this.rd.setProperty(ev, 'dataTransfer.effectAllowed', 'all');
          this.rd.setProperty(ev, 'dataTransfer.dropEffect', 'move');
        } else {
          this.rd.setProperty(ev, 'dataTransfer.effectAllowed', 'none');
          this.rd.setProperty(ev, 'dataTransfer.dropEffect', 'none');
        }
      });
    }
  }

  // 在可拖动的元素移出放置目标时执行 
  @HostListener('dragleave', ['$event'])
  onDragLeave(ev: Event) {
    ev.preventDefault();
    ev.stopPropagation();
    // 判断拖拽 是否是 当前应用的元素 发起的
    if (this.el.nativeElement === ev.target) {
      this.drag$.subscribe(dragData => {
        if (dragData && this.dropTags.indexOf(<string>dragData.tag) > -1) {
          this.rd.removeClass(this.el.nativeElement, this.dragEnterCalss);
        }
      });
      
    }
  }

  //在可拖动元素放置在 <div> 元素中时执行 
  @HostListener('drop', ['$event'])
  onDrop(ev: Event) {
    ev.preventDefault();
    ev.stopPropagation();
    // 判断拖拽 是否是 当前应用的元素 发起的
    if (this.el.nativeElement === ev.target) {
      this.drag$.subscribe(dragData => {
        if (dragData && this.dropTags.indexOf(dragData.tag) > -1) {
          this.rd.removeClass(this.el.nativeElement, this.dragEnterCalss);
          this.dropped.emit(dragData);
          this.dragServes.clearDragData();
        }
      });
      
    }
  }

}
